<template>
  <CesiumBox ref="containerCesium"></CesiumBox>
  <ThreeBox ref="containerThree" class="pointer-events-none"></ThreeBox>
</template>

<script setup>
import CesiumBox from "../../components/CesiumBox.vue";
import ThreeBox from "../../components/ThreeBox.vue";
import { ref, onMounted } from "vue";
import * as Cesium from "cesium";
import * as THREE from "three";
import { FontLoader } from "../../lib/three/loaders/FontLoader";
import { TextGeometry } from "../../lib/three/geometries/TextGeometry";

const containerCesium = ref(null);
const containerThree = ref(null);
let cesiumPara = null;
let threeBox = null;
let threePara = null;
let scene = new THREE.Scene();

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  threePara.renderer.render(scene, threePara.camera);
}

function initCesium() {
  cesiumPara.viewer.scene.preRender.addEventListener(() => {
    // cesium相机位置
    var cvm = cesiumPara.viewer.camera.viewMatrix;
    var civm = cesiumPara.viewer.camera.inverseViewMatrix;
    // 同步Three相机位置设置
    threePara.camera.matrixWorld.set(
      civm[0],
      civm[4],
      civm[8],
      civm[12],
      civm[1],
      civm[5],
      civm[9],
      civm[13],
      civm[2],
      civm[6],
      civm[10],
      civm[14],
      civm[3],
      civm[7],
      civm[11],
      civm[15]
    );
    threePara.camera.matrixWorldInverse.set(
      cvm[0],
      cvm[4],
      cvm[8],
      cvm[12],
      cvm[1],
      cvm[5],
      cvm[9],
      cvm[13],
      cvm[2],
      cvm[6],
      cvm[10],
      cvm[14],
      cvm[3],
      cvm[7],
      cvm[11],
      cvm[15]
    );
    threePara.camera.updateProjectionMatrix();
  });

  cesiumPara.viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(
      119.33323300204735,
      45.515982205382514,
      20936.417232786083
    ),
    orientation: {
      heading: 0.866828144346754,
      pitch: -0.22739289214200586,
      roll: 6.282429226727245,
    },
    duration: 3,
  });
}

function initThree() {
  //相机
  threePara.camera = new THREE.PerspectiveCamera(
    45,
    threeBox.clientWidth / threeBox.clientHeight,
    1,
    10000000
  );
  threePara.camera.position.set(0, 0, 1000);
  threePara.camera.lookAt(0, 0, 0);
  threePara.camera.matrixAutoUpdate = false;

  //渲染器
  threePara.renderer = new THREE.WebGLRenderer({ alpha: true });
  threePara.renderer.setPixelRatio(window.devicePixelRatio);
  threePara.renderer.setSize(threeBox.clientWidth, threeBox.clientHeight);
  threeBox.appendChild(threePara.renderer.domElement);

  animate();
}

function addObject(pos) {
  /* let geometry = new THREE.BoxGeometry(10000, 10000, 10000);
    let material = new THREE.MeshStandardMaterial({ color: 0xffff00 });
    let mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(pos.x + 10000, pos.y + 10000, pos.z + 10000);
    mesh.lookAt(0, 0, 0);
    scene.add(mesh); */

  let loader = new FontLoader();
  loader.load("./three/fonts/KaiTi_Regular.json", function (font) {
    let textGeo = new TextGeometry("凛冬将至", {
      font: font,
      size: 8000,
      height: 1000,
      curveSegments: 12,
      bevelEnabled: true,
      bevelSegments: 5,
    });
    let materials = [
      new THREE.MeshPhongMaterial({ color: 0xffffff, flatShading: true }),
      new THREE.MeshPhongMaterial({ color: 0xffffff }),
    ];
    let textMesh = new THREE.Mesh(textGeo, materials);
    textMesh.position.set(pos.x + 10000, pos.y + 10000, pos.z + 10000);
    textMesh.lookAt(0, 0, 0);
    textMesh.rotateX(-Math.PI * 0.5);

    scene.add(textMesh);
  });
}

onMounted(() => {
  cesiumPara = containerCesium.value.cesiumPara;
  threeBox = containerThree.value.threeBox;
  threePara = containerThree.value.threePara;
  initCesium();
  initThree();
  addObject(Cesium.Cartesian3.fromDegrees(120, 46, 0));
});
</script>
